<template>
  <!-- 资产租控饼图 -->
  <div class="controlEchartPage" id="controlChartBox"></div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { homeApi } from "@/api/home";
// 引入echarts
import echarts from "@/common/utils/echarts.js";

const myControlChart = ref(null);
const props = defineProps({
  getDataArr: {
    type: Array,
    required: true,
    default: [],
  },
});

const options = reactive({
  tooltip: {
    trigger: "item",
  },
  series: [
    {
      name: "myInsidePie",
      type: "pie",
      color: ["#F7F7F7"],
      radius: [0, "50%"],
      tooltip: {
        show: false,
      },
      label: {
        fontSize: 36,
        position: "center",
        color: "#1A1A1A",
        lineHeight: 15,
        padding: [30, 0, 0, 0],
        // formatter: '{b}: {d}'
        formatter: " {c}{per|%}\n{bchange|{b}}",
        rich: {
          bchange: {
            fontSize: 14,
            lineHeight: 33,
            color: "#999999",
            fontWeight: 400,
          },
          per: {
            color: "#999999",
            fontWeight: 400,
            fontSize: 16,
            verticalAlign: "top",
            padding: [0, 0, 0, 2],
          },
        },
      },
      data: [{ value: 0, name: " 出租率" }],
    },
    {
      name: "数量",
      type: "pie",
      radius: ["70%", "90%"],
      label: {
        show: false,
      },
      avoidLabelOverlap: false,
      color: ["#FC7018", "#FFEFEB"],
      itemStyle: {
        borderRadius: 2,
        borderColor: "#fff",
        borderWidth: 2,
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
      data: [{ value: 0, name: "占比" }],
    },
  ],
});

// 定义向父组件传值方法
const emits = defineEmits(["getChartInfoObj"]);

// 初始化数据
const initControlChartData = () => {
  homeApi.assetLeasecontrol().then((res) => {
    const { code, data, msg } = res;
    let chartInfoObj = {
      totalNum: 0,
      totalAreaObj: {
        value: "0.00",
        unit: "平",
      },
      haveLetedNum: 0,
      letedAreaObj: {
        value: "0.00",
        unit: "平",
      },
      freeNum: 0,
      freeAreaObj: {
        value: "0.00",
        unit: "平",
      },
      incomeObj: {
        value: "0.00",
        unit: "元",
      },
    };
    if (code == 200) {
      chartInfoObj = {
        totalNum: data.assetsNum ? data.assetsNum : 0,
        totalAreaObj: {
          value: data.assetsArea ? data.assetsArea : "0.00",
          unit: "平",
        },
        haveLetedNum: data.hireAssetsNum ? data.hireAssetsNum : 0,
        letedAreaObj: {
          value: data.hireArea ? data.hireArea : "0.00",
          unit: "平",
        },
        freeNum: data.idleAssetsNum ? data.idleAssetsNum : 0,
        freeAreaObj: {
          value: data.idleAssetsArea ? data.idleAssetsArea : "0.00",
          unit: "平",
        },
        incomeObj: {
          value: data.income ? data.income : "0.00",
          unit: "元",
        },
      };
      // 出租率 = 出租个数 / 总个数
      let lettingRate = ((data.hireAssetsNum / data.assetsNum) * 100).toFixed(1);
      let rateNumObj = {
        value: lettingRate,
        name: "出租率",
      };
      options.series[0].data[0] = rateNumObj;
      let numArr = [
        {
          value: data.hireArea,
          name: "出租",
        },
        {
          value: data.idleAssetsArea,
          name: "空闲",
        },
      ];
      options.series[1].data = numArr;
    } else {
      // options.series[0].data[0] = {
      //   value: 0,
      //   name: "出租率",
      // };
      // options.series[1].data = [
      //   {
      //     value: 0,
      //     name: "占比",
      //   },
      // ];
    }
    emits("getChartInfoObj", chartInfoObj);
    myControlChart.value.setOption(options);
    resizeControlChart();
  });
};

const initMyChart = () => {
  // 基于准备好的dom，初始化echarts实例
  myControlChart.value = echarts.init(
    document.getElementById("controlChartBox")
  );
  initControlChartData();
};

const resizeControlChart = () => {
  // 根据页面大小自动响应图表大小
  window.addEventListener("resize", function () {
    setTimeout(() => {
      myControlChart.value.resize();
    }, 500);
  });
};

onMounted(() => {
  initMyChart();
});
</script>

<style lang="scss" scoped>
.controlEchartPage {
  width: 100%;
  height: 70%;
}
</style>
